<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户登录</title>
    <link rel="stylesheet" href="/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/css/layui.css">

</head>
<body>
        <div class="layui-layout-admin">
            <div class="layui-header layui-bg-green">
                <div class="layui-logo "></div>
            </div>
        </div>

        <div class="window">
            <h1>欢迎登陆</h1>
            <br>
            <form class ="layui-form" method="post" action="" id = "loginform" lay-verify="compentent-form" >
                <div class = "layui-form-item" style="...">
                    <label class = "layui-form-label">账&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" required lay-verify="username" placeholder="请输入账号"
                               autocomplete="off" class = "layui-input" lay-submit="">
                        </div>
                </div>
                <div class = "layui-form-item">
                    <label class="layui-form-label">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                        <div class="layui-input-block">
                            <input type="text" name="password" required lay-verify="username" placeholder="请输入密码"
                                autocomplete="off" class="layui-input" lay-submit="">
                        </div>
                </div>
                <center>
                <legend>请使用邮箱登陆，首次登陆请进行注册，密码发送至邮箱</legend>
                <legend>忘记密码请联系管理员找回</legend><br>
                <legend><button class="layui-btn " lay-filter="login_button" lay-submit="">登&nbsp;&nbsp;&nbsp;&nbsp;陆</button>
                </legend>
                </center>
            </form>
            <br>
            <a href="register.html" class="layui-btn">注&nbsp;&nbsp;&nbsp;&nbsp;册</a>
        </div>

<script src="/constant.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js"></script>
<script>
    layui.use('form', function(){
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit;
        let data = new Date().getTime()   //先将此时的时间转化为毫秒
        let new_data = new Date(data + 60*60*1000)  //将过期时间设置为1分钟后

        //各种基于事件的操作的回调检测;
        document.getElementById("loginform").action = "/accountCheck"; /*后端抓取正则,获得form中的账号和用户名,判断正确与否*/
        //以后这里要改成ajax
        //服务器上打开

        form.on('submit(login_button)', function(data){
            /*设置cookie*/
            console.log(data.field);
            document.cookie= 'username=' + data.field["username"] + ';expires=' + new_data.toUTCString();
            document.cookie= 'password=' + data.field["password"] + ';expires=' + new_data.toUTCString() + ';';
            console.log(getCookie("username"));
            console.log(getCookie("password"));
            //return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>

<div class="layui-footer layui-bg-green">
    <span class="layui-breadcrumb" lay-separator="|"></span>
</div>

</body>

</html>
